import { Link, useDispatch } from 'umi';
import styles from './index.less';
import { Form, Input, Button } from 'antd';

interface LoginProps {
  showForgetPwd?: boolean;
  showRegister?: boolean;
}

interface LoginValues {
  name: string;
  password: string;
}

export default function (props: LoginProps) {
  const dispatch = useDispatch();
  const { showForgetPwd, showRegister } = props;
  return (
    <div className={styles.loginContainer}>
      <Form
        layout="vertical"
        onFinish={(values) => {
          dispatch({
            type: 'security/login',
            payload: values,
          });
        }}
      >
        <Form.Item
          name="name"
          label="邮箱"
          rules={[{ required: true, message: '邮箱不能为空' }]}
        >
          <Input placeholder="请输入邮箱" />
        </Form.Item>
        <Form.Item
          name="password"
          label="密码"
          rules={[{ required: true, message: '密码不能为空' }]}
        >
          <Input type="password" placeholder="请输入密码" />
        </Form.Item>
      </Form>
      <div className={styles.loginLink}>
        {showRegister && (
          <Link to="/register">
            <span className={styles.linkItem}>用户注册</span>
          </Link>
        )}
        {showForgetPwd && (
          <Link to="/forgetpwd">
            <span className={styles.linkItem}>忘记密码？</span>
          </Link>
        )}
      </div>
      <Button block htmlType="submit" type="primary" size="large">
        登录
      </Button>
    </div>
  );
}
